.bin-select {
  position: relative;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
  color: $color-text-default;
  font-size: $base-font-size;
  line-height: $base-line-height;
  &__caret {
    &.b-iconfont.b-icon-down {
      color: $color-icon-default;
      font-size: 14px;
      transition: transform .3s;
      cursor: pointer;
      &.is-reverse {
        transform: rotateZ(180deg);
      }
    }
    &.is-show-close {
      color: $color-icon-hover;
      font-size: 14px;
      transition: transform .3s;
      cursor: pointer;
      border-radius: 100%;
      z-index: 30;
      background-color: #fff;
    }
  }
  .bin-select__tags {
    position: absolute;
    line-height: normal;
    white-space: normal;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .bin-tag {
      box-sizing: border-box;
      border-color: transparent;
      margin: 2px 0 2px 6px;
      background-color: #f0f2f5;
    }
  }
  &__input {
    border: none;
    outline: none;
    padding: 0;
    margin-left: 15px;
    color: #666;
    font-size: 14px;
    appearance: none;
    height: 28px;
    background-color: transparent;
  }
}
// 下拉框样式
.bin-select__popper {
  &.bin-popper {
    width: inherit;
    overflow: auto;
    padding: 5px 0;
    background-color: $color-white;
    box-sizing: border-box;
    border-radius: $border-base-radius;
    box-shadow: $shadow-2-down;
    position: absolute;
    z-index: 900;
    &.is-light {
      border: none;
    }
  }
  .is-multiple {
    .bin-select-dropdown__item {
      &.selected {
        background-color: #fff;
        &::after {
          font-family: "b-iconfont" !important;
          font-style: normal;
          font-weight: normal;
          font-size: 14px;
          content: '\e829';
          color: $color-primary-light1;
          position: absolute;
          top: 2px;
          right: 8px;
        }
      }
    }
  }
  .bin-select-dropdown__empty {
    padding: 10px 0;
    margin: 0;
    text-align: center;
    color: #999;
    font-size: 14px
  }
  .bin-select-dropdown__wrap {
    max-height: 274px;
  }
  .bin-select-dropdown__list {
    padding: 0;
  }
  .bin-select-dropdown__item {
    position: relative;
    margin: 0;
    padding: 5px 12px;
    line-height: 22px;
    width: 100%;
    clear: both;
    color: $color-text-default;
    font-size: $base-font-size !important;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    transition: background $animation-duration-base ease-in-out;
    &:hover, &:focus, &.hover {
      background: #f3f3f3;
      outline: none;
    }
    &.selected {
      color: $color-primary;
      font-weight: 600;
      background: $color-primary-light5;
    }
    &.is-disabled {
      color: $btn-disable-color !important;
      cursor: not-allowed;
      &:hover {
        color: $btn-disable-color !important;
        background-color: #fff;
        cursor: not-allowed;
      }
    }
  }

  .bin-select-group__wrap {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    &:not(:last-of-type) {
      padding-bottom: 24px;
      &:after {
        content: "";
        position: absolute;
        display: block;
        left: 10px;
        right: 10px;
        bottom: 12px;
        height: 1px;
        background: #e4e7ed;
      }
    }
  }
  .bin-select-group__title {
    padding-left: 8px;
    font-size: $base-font-size;
    color: $color-text-secondary;
    height: 30px;
    line-height: 30px;
  }
}
